<!doctype html>

<html>
  <head>
    <title>Customize style</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
      body {
        text-align: center;
      }

      #g1, #g2, #g3, #g4, #g5, #g6 {
        width:200px; height:160px;
        display: inline-block;
        margin: 1em;
      }

      p {
        display: block;
        width: 450px;
        margin: 2em auto;
        text-align: left;
      }
    </style>

	</head>
  <body>
    <div id="g1"></div>
    <div id="g2"></div>
    <div id="g3"></div>
    <div id="g4"></div>
    <div id="g5"></div>
    <div id="g6"></div>
    <p>
      Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min &amp; max etc.
    </p>
    <p>
      Check non-minified version of justgage.js for list of all setup parameters.
    </p>
    <script src="../raphael-2.1.4.min.js"></script>
    <!--<script src="../justgage-1.0.1.js"></script>-->
    <script src="../justgage.js"></script>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {

      var g1, g2, g3, g4, g5, g6;

      var g1 = new JustGage({
        id: "g1",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Width",
        label: "",
        gaugeWidthScale: 0.2
      });

      var g2 = new JustGage({
        id: "g2",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Shadow",
        label: "",
        shadowOpacity: 1,
        shadowSize: 5,
        shadowVerticalOffset: 10
      });

      var g3 = new JustGage({
        id: "g3",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Custom Colors",
        label: "",
        levelColors: [
          "#00fff6",
          "#ff00fc",
          "#1200ff"
        ]
      });

      var g4 = new JustGage({
        id: "g4",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Hide Labels",
        hideMinMax: true
      });


      var g5 = new JustGage({
        id: "g5",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Animation Type",
        label: "",
        startAnimationTime: 2000,
        startAnimationType: ">",
        refreshAnimationTime: 1000,
        refreshAnimationType: "bounce"
      });

      var g6 = new JustGage({
        id: "g6",
        value: getRandomInt(0, 100),
        min: 0,
        max: 100,
        title: "Minimal",
        label: "",
        hideMinMax: true,
        gaugeColor: "#fff",
        levelColors: ["#000"],
        hideInnerShadow: true,
        startAnimationTime: 1,
        startAnimationType: "linear",
        refreshAnimationTime: 1,
        refreshAnimationType: "linear"
      });

        setInterval(function() {
          g1.refresh(getRandomInt(0, 100));
          g2.refresh(getRandomInt(0, 100));
          g3.refresh(getRandomInt(0, 100));
          g4.refresh(getRandomInt(0, 100));
          g5.refresh(getRandomInt(0, 100));
          g6.refresh(getRandomInt(0, 100));
        }, 2500);

    });
    </script>
  </body>
</html>
